<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
    <div>
        <form action="/getUsers" method="get">
            <input type="text" id="username" name="username" value=""/><br/>
            <div class="row g-3 align-items-center">
                <div class="col-auto">
                    <label for="inputPassword6" class="col-form-label">Password</label>
                </div>
                <div class="col-auto">
                    <input type="password" style="width:200px" id="inputPassword6" class="form-control" value="" aria-describedby="passwordHelpInline">
                </div>
                <div class="col-auto">
                <span id="passwordHelpInline" class="form-text">
                长度必须在8-20之间.
                </span>
                </div>
            </div><br/>
            <input type="text" id="email" name="email" value=""/><br/>
            <input type="button" id="tijiao" value="提交"><br/>
            <input type="reset" value="重置">
        </form>
    </div>
    <table id="usertable" class="table table-striped">
        <caption>条纹表格布局</caption>
        <thead>
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>邮箱</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user:${users}">
            <td style="display: none" id="ids" th:text="${user.getId()}"></td>
            <td id="names" th:text="${user.getUsername()}"></td>
            <td id="passwords" th:text="${user.getPassword()}"></td>
            <td id="emails" th:text="${user.getEmail()}"></td>
            <td><button class="update" value="修改">修改</button></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(".update").click(function(){
        var value = $(this).parent().parent().children().eq(0).text();
        window.location.href="/user/updateUser?id="+value;
    })

    $("#tijiao").click(function (){
        var username = $("#username").val();
        var password = $("#inputPassword6").val();
        var email = $("#email").val();
        if(password.length>7&&password.length<21){
            $.ajax({
                type:'post',
                //async : 'false', //async，true是异步传输，false指同步传输
                dataType:'text', //dataType是数据类型，json: 返回 JSON 数据 。
                cache : 'false', //cache属性是flase时：每次读取的是最新的数据。
                url:'saveUser/'+username+'/'+password+'/'+email,
                success:function(msg){
                    //将数据回显到弹窗
                    alert(msg)

                }
            });
        }else {
            alert("密码必须在8-20位之间")
        }


    })
</script>